<template>
  <div class='number'>
    <div class="header">
      <div class="title">
        数字起卦
      </div>
      <div class="tips">
        请在下方输入3个您第一时间想到的数字
      </div>
    </div>

    <div class="body">
      <u-field
			v-model="form.num1"
			label="数字1"
			placeholder="请填写数字1"
		/>
    <u-field
			v-model="form.num2"
			label="数字2"
			placeholder="请填写数字2"
		/>
    <u-field
			v-model="form.num3"
			label="数字3"
			placeholder="请填写数字3"
		/>
    </div>

    <div class="btn-area">
      <u-button type="primary" shape="circle" @click="byNumber">确认起卦</u-button>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {LiuRen} from '@/utils/index'
import { setRes } from '@/utils/res';

const form = ref({
  num1: null,
  num2: null,
  num3: null,
})

const byNumber = () => {
  const {num1,num2,num3} = form.value

  const res = LiuRen.randomThreesTell(num1,num2,num3)
  if (!res) {
    return;
  }
  setRes(res)
  uni.navigateTo({
    url: '/pages/res/index'
  })
  console.log(res, '--res');
}
</script>


<style lang='scss' scoped>
.number {
  padding: 40rpx;
  .header {
    padding-bottom: 80rpx;
    text-align: center;
    .title {
      padding-bottom: 40rpx;
      font-size: 48rpx;
      font-weight: 700;
    }
  }
  .btn-area {
    padding-top: 80rpx;
  }
}
</style>
